<!DOCTYPE html>
<html>
<%@page import="mobi.weq.model.Observation"%>
<%@page import="mobi.weq.dao.ObservationDao"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Observation JSP</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/button-extension.css">
<link rel="stylesheet" type="text/css" href="jsp/observation.css">

<!-- for google map -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script type="text/javascript" src="jsp/observation.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="btn-group btn-group-justified" id="top-menu">
					<div class="btn-group">
						<button type="button" id="user-observation-button" class="btn btn-warning">Observation</button>
					</div>
					<div class="btn-group">
						<button type="button" id="sensor-button" class="btn btn-default">Sensors</button>
					</div>
					<div class="btn-group">
						<button type="button" id="photo-button" class="btn btn-default">Photo</button>
					</div>
				</div>
				<h4 style="text-align: center;">
					<small id="location-reverse-geocode">...</small>
				</h4>
			</div>
			<div class="panel-body">
				<form role="form" id="observation-form" method="post" action="observation"  enctype="multipart/form-data">
					<div id="user-observation" connectedto="user-observation-button">
						<div class="btn-group btn-group-justified">
							<div class="btn-group">
								<button type="button" id="low" class="btn btn-default" data-active="btn btn-success">Low</button>
							</div>
							<div class="btn-group">
								<button type="button" id="moderate" class="btn btn-default" data-active="btn btn-warning">Moderate</button>
							</div>
							<div class="btn-group">
								<button type="button" id="high" class="btn btn-default" data-active="btn btn-danger">High</button>
							</div>
							<div class="btn-group">
								<button type="button" id="very-high" class="btn btn-default" data-active="btn btn-super-danger">Very High</button>
							</div>
						</div>
						<div class="form-group">
							<textarea placeholder="Enter user comment" name="user_comments" class="form-control"></textarea>
						</div>
						<div class="hidden">
							<input type="radio" name="user_categorization" connectedTo="low" value="Low" />
							<input type="radio" name="user_categorization" connectedTo="moderate" value="Moderate" />
							<input type="radio" name="user_categorization" connectedTo="high" value="High" />
							<input type="radio" name="user_categorization" connectedTo="very-high" value="Very High" />
						</div>
						<div class="hidden">
							<input name="latitude" type="text" />
							<input name="longitude" type="text" />
						</div>
					</div>
					<div id="sensor-data" class="hidden" connectedto="sensor-button">
						<div class="form-group">
							<div class="input-group">
								<input type="text" placeholder="Enter NO2 value" name="no2" class="form-control" />
								<span class="input-group-addon">
									&mu;/m
									<sup>3</sup>
								</span>
							</div>
							<div class="input-group">
								<input type="text" placeholder="Enter CO value" name="co" class="form-control" />
								<span class="input-group-addon">
									&mu;/m
									<sup>3</sup>
								</span>
							</div>
							<div class="input-group">
								<input type="text" placeholder="Enter SO2" name="so2" class="form-control" />
								<span class="input-group-addon">
									&mu;/m
									<sup>3</sup>
								</span>
							</div>
							<div class="input-group">
								<input type="text" placeholder="Enter O3 value" name="o3" class="form-control" />
								<span class="input-group-addon">
									&mu;/m
									<sup>3</sup>
								</span>
							</div>
							<div class="input-group">
								<input type="text" placeholder="Enter PM10 value" name="pm10" class="form-control" />
								<span class="input-group-addon">
									&mu;/m
									<sup>3</sup>
								</span>
							</div>
							<div class="input-group">
								<input type="text" placeholder="Enter PM2.5 value" name="pm2p5" class="form-control" />
								<span class="input-group-addon">
									&mu;/m
									<sup>3</sup>
								</span>
							</div>
						</div>
					</div>
					<div connectedto="photo-button" class="hidden">
						<div class="form-group">
							<input id="image-upload" type="file" placeholder="Upload An Image" name="image"
								style="position: absolute; top: -9999px; left: -9999px;" class="form-control" />
							<button type="button" id="image-uploader-helper" class="btn btn-default btn-lg btn-block">Upload a
								Picture</button>
						</div>
						<div class="form-group">
							<textarea placeholder="Picture Description" name="image_description" class="form-control"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="panel-footer">
				<div class="btn-group btn-group-justified">
					<div class="btn-group">
						<a href="home" id="cancel-button" class="btn btn-danger">Cancel</a>
					</div>
					<div class="btn-group">
						<button type="button" type="submit" id="submit-button" class="btn btn-primary">Submit</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>